<template>

	<view class="page-bg">
		<u-navbar :autoBack="true" :border="false" :placeholder="true">
			<view slot="center" class="fb c3 f16">
				账户统计
			</view>
		</u-navbar>
		<u-sticky bgColor="#fff" :offset-top="offsetTop" customNavHeight="44">
			<u-tabs :list="tabs" :current="currentIndex" lineColor="#1AC388" @change="tabsChange"
				:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.05)'}"></u-tabs>
		</u-sticky>
		<view class="container" style="padding-top: 0px;">
			<swiper :current="currentIndex" duration="300" @change="changeTab" style="height: 100vh;">
				<swiper-item v-show="currentIndex==0" class="mt10">
					<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
						@scrolltolower="onreachBottom">
						<view class=" mt10">
							<view v-for="item,index in allOrder1" :key="index">
								<view class="order-item p10 mt10">
									<view class="f-s-b">
										<view class="c3 fb f16">{{item.orderNo}}</view>
									</view>
									<view class="divider-line mt10 mb10" />
									<view class="f">
										<view class="f">
											<image src="../../static/order/timer-order.svg"
												style="width: 20px; height: 20px;">
											</image>
											<view class="f16 fb c3 ml10">{{item.createTime}}</view>
										</view>
										<view class="f ml20">
											<image src="../../static/order/user-order.svg"
												style="width: 20px; height: 20px;">
											</image>
											<view class="f16 fb c3 ml10">{{item.contactor}}</view>
										</view>
									</view>

									<view class="f14 c6 mt10">
										<view class="f">
											<view>
												预约地址：
											</view>
											<view class="ml5">
												{{item.province+item.city+item.county+item.address}}
											</view>
										</view>
										<view class="f">
											<view>
												物品估重：
											</view>
											<view class="ml5">
												{{Number(item.expectWeightTal).toFixed(2)}}kg
												
											</view>
										</view>
										<view class="f">
											<view>
												预估金额：
											</view>
											<view class="ml5">
												¥{{Number(item.expectAmountTal).toFixed(2)}}
												
											</view>
										</view>
										<view class="f">
											<view>
												预约开始时间：
											</view>
											<view class="ml5">
												{{item.startTime}}
											</view>
										</view>
										<view class="f">
											<view>
												预约结束时间：
											</view>
											<view class="ml5">
												{{item.endTime}}
											</view>
										</view>
										<view class="f">
											<view>
												服务用时：
											</view>
											<view class="ml5">
												{{item.timeStr}}
											</view>
										</view>

									</view>

								</view>


							</view>
							<view class="f-f-c-c" v-show="allOrder1.length==0">
								<image src="../../static/no-data.svg"></image>
								<view>暂无记录</view>
							</view>
						</view>
					</scroll-view>

				</swiper-item>
				<swiper-item v-show="currentIndex==1" class="mt10">
					<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
						@scrolltolower="onreachBottom">
						<view class="recycle-bg mt10">
							<view v-for="item,index in allOrder2" :key="index">
								<view class="order-item p10 mt10">
									<view class="f-s-b">
										<view class="c3 fb f16">{{item.orderNo}}</view>
										<view class="cr">{{status[item.status]}}</view>
									</view>
									<view class="divider-line mt10 mb10" />
									<view class="f">
										<view class="f">
											<image src="../../static/order/timer-order.svg"
												style="width: 20px; height: 20px;">
											</image>
											<view class="f16 fb c3 ml10">{{item.createTime}}</view>
										</view>
										<view class="f ml20">
											<image src="../../static/order/user-order.svg"
												style="width: 20px; height: 20px;">
											</image>
											<view class="f16 fb c3 ml10">{{item.contactor}}</view>
										</view>
									</view>

									<view class="f14 c6 mt10">
										<view class="f">
											<view>
												预约地址：
											</view>
											<view class="ml5">
												{{item.province+item.city+item.county+item.address}}
											</view>
										</view>
										<view class="f">
											<view>
												物品估重：
											</view>
											<view class="ml5">
												{{item.expectWeightTal}} kg
											</view>
										</view>
										<view class="f">
											<view>
												预估金额：
											</view>
											<view class="ml5">
												¥ {{item.expectAmountTal}}
											</view>
										</view>
										<view class="f">
											<view>
												预约开始时间：
											</view>
											<view class="ml5">
												{{item.startTime}}
											</view>
										</view>
										<view class="f">
											<view>
												预约结束时间：
											</view>
											<view class="ml5">
												{{item.endTime}}
											</view>
										</view>

									</view>

								</view>

							</view>

						</view>
						<view class="f-f-c-c" v-show="allOrder2.length==0">
							<image src="../../static/no-data.svg"></image>
							<view>暂无记录</view>
						</view>
					</scroll-view>

				</swiper-item>
				<swiper-item v-show="currentIndex==2" class="mt10">

					<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
						@scrolltolower="onreachBottom">


						<view class=" mt10">
							<view class="b-b p12 f-c" v-for="item,index in allOrder3" :key="index">
								</image>
								<view class="ml10 f1">
									<view class="c3 f16">
										{{item.orderNo}}
									</view>
									<view class="c6 f14 mt10">
										{{item.createTime}}
									</view>
								</view>
								<view class="c3 fb f20">
									+¥{{item.amountTal}}
								</view>
							</view>
							<view class="f-f-c-c" v-show="allOrder3.length==0">
								<image src="../../static/no-data.svg"></image>
								<view>暂无记录</view>
							</view>
						</view>
					</scroll-view>

				</swiper-item>

				<swiper-item v-show="currentIndex==3" class="mt10">
					<scroll-view :scroll-top="scrollTop" :style="{height:scrollerHeight}" scroll-y
						@scrolltolower="onreachBottom">
						<view class=" mt10">
							<view class="b-b p12 f-c" v-for="item,index in allOrder4" :key="index">
								</image>
								<view class="ml10 f1">
									<view class="c3 f16">
										{{item.orderNo}}
									</view>
									<view class="c6 f14 mt10">
										{{item.createTime}}
									</view>
								</view>
								<view class="cm fb f20">
									+¥{{item.amountTal}}
								</view>
							</view>
							<view class="f-f-c-c" v-show="allOrder4.length==0">
								<image src="../../static/no-data.svg"></image>
								<view>暂无记录</view>
							</view>

						</view>
					</scroll-view>

				</swiper-item>
			</swiper>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				currentIndex: 0,
				offsetTop: '0px',
				tabs: [{
					name: '时长',
				}, {
					name: '接单记录',
				}, {
					name: '当日流水'
				}, {
					name: '累计流水'
				}],
				allOrder1: [],
				allOrder2: [],
				allOrder3: [],
				allOrder4: [],
				scrollerHeight: 0,
				swiperContentHeight: 0,
				scrollTop: 9999,
				ismore1: true,
				ismore2: true,
				ismore3: true,
				ismore4: true,
				params1: {
					pageNum: 1,
					pageSize: 10,
					status: '5',
				},
				params2: {
					pageNum: 1,
					pageSize: 10,
					status: '-1',
				},
				params3: {
					pageNum: 1,
					pageSize: 10,
					status: '4',
					queryTime: '',
				},
				params4: {
					pageNum: 1,
					pageSize: 10,
					status: '4',
				},
				status: ['待接单', '用户取消', '待服务', '', '服务中', '成功-待评价', '已完成', '服务失败-待评价', '服务失败', '超时结束'],
			}

		},
		onLoad() {
			let system = uni.getSystemInfoSync()
			this.offsetTop = (system.statusBarHeight) + 'px'
			this.getScollHeight();
			this.loadData1();
			this.loadData2();
			this.loadData3();
			this.loadData4();
			console.log(this.offsetTop, '   ---')
		},
		methods: {
			loadData1() {
				let that = this
				that.request("get", "riderAppOrder/app/getOrderPageList", uni.getStorageSync('token'), this.params1).then(
					res => {
						console.log(res)
						if (res.code === 200) {
							if (that.params1.pageNum == 1) {
								this.ismore1 = true
								that.allOrder1 = []
								that.allOrder1 = res.rows
							} else {
								that.allOrder1 = [...that.allOrder1, ...res.rows]
							}
							if (res.rows.length < 10) {
								that.ismore1 = false
							} else {
								that.ismore1 = true
							}

						}
					})
			},
			loadData2() {
				let that = this
				that.request("get", "riderAppOrder/app/getOrderPageList", uni.getStorageSync('token'), that.params2).then(
					res => {
						console.log(res)
						if (res.code === 200) {
							if (that.params2.pageNum == 1) {
								this.ismore2 = true
								that.allOrder2 = []
								that.allOrder2 = res.rows
							} else {
								that.allOrder2 = [...that.allOrder2, ...res.rows]
							}
							if (res.rows.length < 10) {
								that.ismore2 = false
							} else {
								that.ismore2 = true
							}
						}
					})
			},
			loadData3() {
				this.getMidnight()
				let that = this
				that.request("get", "riderAppOrder/app/getSettlementOrderPageList", uni.getStorageSync('token'), that
						.params3)
					.then(
						res => {
							console.log(res)
							if (res.code === 200) {
								if (that.params3.pageNum == 1) {
									this.ismore3 = true
									that.allOrder3 = []
									that.allOrder3 = res.rows
								} else {
									that.allOrder3 = [...that.allOrder3, ...res.rows]
								}
								if (res.rows.length < 10) {
									that.ismore3 = false
								} else {
									that.ismore3 = true
								}
							}
						})

			},
			loadData4() {
				let that = this
				that.request("get", "riderAppOrder/app/getSettlementOrderPageList", uni.getStorageSync('token'), that
						.params4)
					.then(
						res => {
							console.log(res)
							if (res.code === 200) {
								if (that.params4.pageNum == 1) {
									this.ismore4 = true
									that.allOrder4 = []
									that.allOrder4 = res.rows
								} else {
									that.allOrder4 = [...that.allOrder4, ...res.rows]
								}
								if (res.rows.length < 10) {
									that.ismore4 = false
								} else {
									that.ismore4 = true
								}
							}
						})

			},
			getMidnight() {
				let today = new Date(); // 获取当前时间
				today.setHours(0, 0, 0, 0); // 设置时分秒为0
				let year = today.getFullYear();
				let month = today.getMonth() + 1;
				let day = today.getDate();
				let hours = today.getHours();
				let minutes = today.getMinutes();
				let seconds = today.getSeconds();
				this.params3.queryTime =
					`${year}-${this.pad(month)}-${this.pad(day)} ${this.pad(hours)}:${this.pad(minutes)}:${this.pad(seconds)}`;
			},
			pad(value) {
				return value < 10 ? `0${value}` : value;
			},
			onreachBottom() {
				switch (currentIndex) {
					case 0:
						if (this.ismore1) {
							this.params1.pageNum += 1
							this.loadData1()
						}
						break
					case 1:
						if (this.ismore2) {
							this.params2.pageNum += 1
							this.loadData2()
						}
						break
					case 2:
						if (this.ismore3) {
							this.params3.pageNum += 1
							this.loadData3()
						}
						break
					case 3:
						if (this.ismore4) {
							this.params4.pageNum += 1
							this.loadData4()
						}
						break
				}

			},
			// 设置scoll高度
			getScollHeight() {
				let that = this
				uni.getSystemInfo({
					success: function(res) {
						let windowHeight = res.windowHeight;
						that.swiperContentHeight = (windowHeight - 100) + 'px';
						that.scrollerHeight = (windowHeight - 20) + 'px'; // 给15px的底部间距然后还要减掉搜索位置高度
					}
				});
			},
			tabsChange(value) {
				console.log(value.index)
				this.currentIndex = value.index
			},
			//swiper 切换监听
			changeTab(e) {
				this.currentIndex = e.target.current;
			},

			navToView(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.order-item {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
	}

	.current-status-icon {
		width: 10px;
		height: 10px;
		background-color: #1AC388;
		border-radius: 10px;
	}

	.status-icon {
		width: 10px;
		height: 10px;
		background-color: #999999;
		border-radius: 10px;
	}

	.navigation-bg {
		width: 65px;
		height: 26px;
		background: rgba(26, 195, 136, 0);
		border-radius: 13px 13px 13px 13px;
		opacity: 1;
		border: 1px solid #1AC388;
	}

	.confirm-bg {
		width: 90px;
		height: 34px;
		margin-left: 10px;
		background: #1AC388;
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.unConfirm-bg {
		margin-left: 10px;
		width: 90px;
		height: 34px;
		background: rgba(26, 195, 136, 0);
		border-radius: 17px 17px 17px 17px;
		opacity: 1;
		color: #1AC388;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1px solid #1AC388;
	}

	.recycle-bg {
		background: #FFFFFF;
		box-shadow: 0px 0px 4px 1px rgba(0, 0, 0, 0.1);
		border-radius: 4px 4px 4px 4px;
		opacity: 1;
	}
</style>